<template>
  <!-- 日期选择器 格式：2022（选择年）-->
  <div class="LDateTimeSelect_root" :style="`width: ${width}px`">
    <span class="label">{{ label }}</span>
    <el-date-picker
      v-model="value"
      type="year"
      size="mini"
      style="flex: 1"
      clearable
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "LSelect",

  props: {
    label: {
      type: String,
      default: "地区",
    },
    width: {
      type: Number,
      default: 250,
    },
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {};
  },

  updated() {
    this.$emit("year-event", this.value);
  },
};
</script>
<style lang="less">
.LDateTimeSelect_root_prefix-icon {
  display: none;
}

input {
  background-color: transparent;
}

.el-picker-panel {
  background: none !important;
}

.el-picker-panel__footer {
  background-color: #213956 !important;
}
</style>

<style lang="less" scoped>
/deep/ .el-input__inner {
  background-color: transparent;
}

/deep/ .el-range-separator {
  color: rgba(221, 221, 221, 1) !important;
}

.LDateTimeSelect_root {
  height: 40px;
  background-image: url("../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}
</style>
